<template>
  <v-card class="mx-auto">
    <v-card-title v-if="onAdding"
      >在
      {{ localCoupon.category.category_name }} 分类下发布新商品</v-card-title
    >
    <v-card-title v-else>编辑商品 {{ coupon.name }}</v-card-title>
    <v-card-text>
      <v-row dense>
        <v-col cols="12">
          <CategorySelector
            v-model="localCoupon.category"
            label="选择要发表商品的栏目"
          ></CategorySelector>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localCoupon.name"
            placeholder="请输入商品标题"
            label="商品标题"
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <v-autocomplete
            v-model="localCoupon.code"
            :items="couponCodes"
            label="商品对应后台类别"
            placeholder="商品对应后台类别"
            :multiple="false"
            item-text="name"
            item-value="value"
            :return-object="false"
            dense
            full-width
          ></v-autocomplete>
        </v-col>
        <v-col cols="12">
          <v-switch
            v-model="manualImageClassify"
            :label="manualImageClassify? '图片分类自动识别':'图片分类手动选择'"
          ></v-switch>
        </v-col>
        <v-col cols="12">
          <RichTextEditor v-model="localCoupon.content"> </RichTextEditor>
        </v-col>
        <v-col cols="12">
          <v-switch
            v-model="localCoupon.active"
            label="商品上线下线"
          ></v-switch>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localCoupon.prize"
            label="售价"
            placeholder="售价"
            outlined
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localCoupon.count"
            label="对应份数"
            placeholder="对应份数"
            outlined
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localCoupon.original_prize"
            label="原价"
            placeholder="原价"
            outlined
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localCoupon.order_index"
            label="商品排序"
            placeholder="商品排序"
            outlined
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="localCoupon.sold_count"
            label="已售出份数"
            placeholder="已售出份数"
            outlined
          ></v-text-field>
        </v-col>
        <v-col cols="12">
          <ImageUploader
            v-model="localCoupon.image"
            parent_dir="coupondef"
            label="可选，封面图"
          ></ImageUploader>
        </v-col>
        <v-col cols="12">
          <ImageUploader
            v-model="localCoupon.header_image"
            parent_dir="coupondef"
            label="可选，header_image"
          ></ImageUploader>
        </v-col>
      </v-row>
    </v-card-text>
    <v-card-actions>
      <v-btn color="grey" small @click.stop="$emit('cancel')">取消</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="primary" small @click.stop="onSave">保存</v-btn>
      <v-btn color="primary" small @click.stop="onFinishEdit">保存&关闭</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
// 商品编辑功能
// emit cancel和finish

import CategorySelector from "./CategorySelector";
import {
  CouponCategory,
  CouponDefCodes,
  CouponDef,
} from "@/store/models/coupon";
import RichTextEditor from "@/components/RichTextEditor";
import ImageUploader from "@/components/file/ImageUploader";
import merge from "lodash/merge";

export default {
  name: "CouponEditor",
  components: {
    RichTextEditor,
    CategorySelector,
    ImageUploader,
  },
  props: {
    coupon: Object,
  },
  data: () => ({
    localCoupon: new CouponDef(),
    category: new CouponCategory(),
  }),
  computed: {
    couponCodes() {
      return CouponDefCodes;
    },
    onAdding() {
      return !this.coupon.id || this.coupon.id == 0;
    },
    manualImageClassify: {
      get() {
        if (
          this.localCoupon.extras &&
          this.localCoupon.extras.manualImageClassify
        ) {
          return this.localCoupon.extras.manualImageClassify;
        } else {
          return false;
        }
      },
      set(value) {
        if (this.localCoupon.extras == null) {
          this.localCoupon.extras = { manualImageClassify: value };
        } else {
          this.localCoupon.extras.manualImageClassify = value;
        }
      },
    },
  },
  watch: {
    coupon: {
      handler(val) {
        // console.log('article change')
        // console.log(val)
        if (val) {
          this.localCoupon = merge(new CouponDef(), val);
        }
      },
      deep: true,
      immediate: true,
    },
    // article(val) {
    //   console.log('article change')
    //   console.log(val)
    //   this.localCoupon = Object.assign(new Article(), val);
    // },
  },
  methods: {
    onFinishEdit() {
      this.$dialog.confirm({
        text: "确定要保存商品到服务器:" + this.localCoupon.name,
        title: "警告",
        waitForResult: true,
        actions: {
          false: {
            text: "取消",
            color: "blue",
          },
          true: {
            text: "确定",
            color: "red",
            handle: () => {
              return this.localCoupon.createOrUpdate().then((res) => {
                this.$emit("finish", res);
                return;
              });
            },
          },
        },
      });
    },
    onSave() {
      this.localCoupon.createOrUpdate().then((res) => {
        return;
      });
    },
  },
};
</script>
